<template>
  <van-form
    validate-trigger="onSubmit"
    :show-error="false"
    ref="from"
    input-align="right"
    error-message-align="right"
    :label-width="120"
    @failed="onFailed"
  >
    <van-field
      required
      readonly
      clickable
      name="idTypeName"
      v-model="formParams.idTypeName"
      label="证件类型"
      placeholder="请选择"
      right-icon="arrow"
      :rules="rules.idTypeName"
      @click="dictOpenPopup('idType')"
    />
    <van-field
      required
      name="idCard"
      v-model="formParams.idCard"
      label="证件号码"
      placeholder="请选择"
      right-icon="arrow"
      class="van-field__right-icon-white"
      :rules="formParams.idType === '111' ? rules.idCard : rules.passport"
    />
    <van-field readonly required v-model="formParams.residentTypeName" label="人口管理类型" />
    <van-field readonly required v-model="formParams.personName" label="姓名" />
    <van-field readonly v-model="formParams.formerName" label="曾用名" />
    <van-field readonly required v-model="formParams.idTypeName" label="证件类型" />
    <van-field readonly required v-model="formParams.idCard" label="证件号码" />
    <van-field readonly required v-model="formParams.sexName" label="性别" />
    <van-field readonly required v-model="formParams.nationalityName" label="民族" />
    <van-field readonly v-model="formParams.birthPlaceName" label="籍贯" />
    <van-field readonly v-model="formParams.birthday" label="出生日期" />
    <van-field readonly v-model="formParams.marriageName" label="婚姻状况" />
    <van-field readonly v-model="formParams.politicName" label="政治面貌" />
    <van-field readonly v-model="formParams.edulevelName" label="学历" />
    <van-field readonly v-model="formParams.religionName" label="宗教信仰" />
    <van-field readonly v-model="formParams.professionTypeName" label="职业类别" />
    <van-field readonly v-model="formParams.profession" label="职业" />
    <van-field readonly v-model="formParams.workPlace" label="工作单位" />
    <van-field readonly v-model="formParams.healthConditionName" label="健康状况" />
    <van-field readonly v-model="formParams.phone" label="联系方式" />
    <van-field readonly v-model="formParams.livingWayName" label="居住方式" />
    <van-field readonly required v-model="formParams.regionCodeName" label="所住区域" />
    <van-field readonly required v-model="formParams.address" label="现住详址" />
  </van-form>
</template>
<script>
import SelectPopup from '@/mixins/selectPopup'
import { idCardCheck, passPortCardReg } from '@/libs/regexp'
export default {
  mixins: [SelectPopup],
  data() {
    return {
      formParams: {},
      rules: {
        idTypeName: [{ required: true, message: '请选择证件类型' }],
        idCard: [
          { required: true, message: '请输入证件号' },
          { validator: idCardCheck, message: '请输入正确的证件号' },
          { validator: this.check, message: '该证件号码已录入' }
        ],
        passport: [
          { required: true, message: '请输入证件号' },
          { pattern: passPortCardReg, message: '请输入正确的证件号' },
          { validator: this.check, message: '该证件号码已录入' }
        ]
      }
    }
  },
  methods: {
    // 表单 - 校验
    onFailed(errorInfo) {
      this.$refs.from.scrollToField(errorInfo.errors[0].name)
    }
  }
}
</script>
